
.tab {
	width: 320px;
	position: relative;
	margin: 0 auto;
	height: 27px;
	background: url(../images/tab_bg.gif)
}

.tab div {
	display: none; /*让选项卡内容在没有激活的时候不显示*/
	position: absolute;
	top: 27px; /*选项卡标题的高度是24px*/
	left: 0;
	width: 310px;
}

.tab .blank {
	display: block;
	padding-bottom: 10px; /*让激活的选项卡内容区域最低端的文字不贴着元素底部*/
}

.tab h3 {
	width: 78px;
	float: left;
	height: 24px;
	border-left: 0px;
	border-right: 0px;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	background: url(images/51.jpg) no-repeat;
	cursor: pointer; /*让鼠标移动到选项卡标题上的时候变成手的形状*/
}

.tab .up {
	color:#000000;
	background: url(images/61.jpg) no-repeat;
}

.tab ul {
	margin: 15px 0 0; /*让列表项文字离选项卡标题的下端远一点*/
	padding: 0;
}

.tab ul,#tab li {
	list-style: none;
}

.tab li {
	width: 96%; /*这里用百分比的作用可以解决IE6中的宽度解析问题*/
	height: 22px;
	line-height: 22px; /*这两行的作用是设置li的高度，并将li中的文字内容上下居中显示*/
	float: left;
	margin: 0 1%;
	border-bottom: 1px dashed #cccccc;
	text-indent: 10px;
	display: inline; /*修改IE6中的双倍间距的bug问题*/
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden; /*这三行的作用是，如果li中的文字内容超过li的大小，则超出的部分用省略号显示*/
}

.tab li a {
	font-size: 12px;
	text-decoration: none;
	color: #333333;
	text-indent: 10px;
}

.tab li a:hover {
	text-decoration: underline;
	color: red;
}

.tab a:hover h3 {
	border: 1px solid #cccccc;
	border-bottom: 0px;
}

<!--第二个选项卡-->



